<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Apricot 1.3</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Le styles -->
    <script type="text/javascript" src="assets/js/jquery.js"></script>

    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/loader-style-zhiyu.css">
    <link rel="stylesheet" href="assets/css/bootstrap.css">


    <link href="assets/js/footable/css/footable.core.css?v=2-0-1" rel="stylesheet" type="text/css">
    <link href="assets/js/footable/css/footable.standalone.css" rel="stylesheet" type="text/css">
    <link href="assets/js/footable/css/footable-demos.css" rel="stylesheet" type="text/css">

    <link rel="stylesheet" href="assets/js/dataTable/lib/jquery.dataTables/css/DT_bootstrap.css">
    <link rel="stylesheet" href="assets/js/dataTable/css/datatables.responsive.css">





    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!-- Fav and touch icons -->
    <link rel="shortcut icon" href="assets/ico/minus.png">
</head>

<body>
<!-- Preloader -->
<div id="preloader">
    <div id="status">&nbsp;</div>
</div>
<!-- TOP NAVBAR -->
<nav role="navigation" class="navbar navbar-static-top">
    <div class="container-fluid">



        <!-- Collect the nav links, forms, and other content for toggling -->
        <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">


            <ul style="margin-right:0;" class="nav navbar-nav navbar-right">
                <li>
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                        <img alt="" class="admin-pic img-circle" src="assets/img/head.JPG">Hi, Zhiyu <b class="caret"></b>
                    </a>
                    <ul style="margin-top:14px;" role="menu" class="dropdown-setting dropdown-menu">
                        <li>
                            <a href="#">
                                <span class="entypo-user"></span>&#160;&#160;My Profile</a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="entypo-vcard"></span>&#160;&#160;Account Setting</a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="entypo-lifebuoy"></span>&#160;&#160;Help</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="http://themeforest.net/item/apricot-navigation-admin-dashboard-template/7664475?WT.ac=category_item&WT.z_author=themesmile">
                                <span class="entypo-basket"></span>&#160;&#160; Purchase</a>
                        </li>
                    </ul>
                </li>
                <li>

                    <ul role="menu" class="dropdown-setting dropdown-menu">

                        <li class="theme-bg">
                            <div id="button-bg"></div>
                            <div id="button-bg2"></div>
                            <div id="button-bg3"></div>
                            <div id="button-bg5"></div>
                            <div id="button-bg6"></div>
                            <div id="button-bg7"></div>
                            <div id="button-bg8"></div>
                            <div id="button-bg9"></div>
                            <div id="button-bg10"></div>
                            <div id="button-bg11"></div>
                            <div id="button-bg12"></div>
                            <div id="button-bg13"></div>
                        </li>
                    </ul>
                </li>
                <li class="hidden-xs">
                    <a class="toggle-left" href="#">
                        <span style="font-size:20px;" class="entypo-list-add"></span>
                    </a>
                </li>
            </ul>

        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

<!-- SIDE MENU -->
<div id="skin-select">
    <div id="logo">
        <h1>YoRoad<span style="margin-left:10%">v1.0</span></h1>
    </div>

    <a id="toggle">
        <span class="entypo-menu"></span>
    </a>
    <div class="dark">
        <form action="#">
                <span>
                    <input type="text" name="search" value="" class="search rounded id_search" placeholder="Search Menu..." autofocus="">
                </span>
        </form>
    </div>

    <div class="search-hover">
        <form id="demo-2">
            <input type="search" placeholder="Search Menu..." class="id_search">
        </form>
    </div>




    <div class="skin-part">
        <div id="tree-wrap">
            <div class="side-bar">
                <ul class="topnav menu-left-nest">
                    <li>
                        <a href="#" style="border-left:0px solid!important;" class="title-menu-left">

                            <span>&nbsp;App&nbsp;&nbsp;管理&nbsp;</span>
                            <i data-toggle="tooltip" class="entypo-cog pull-right config-wrap"></i>

                        </a>
                    </li>

                    <li>
                        <a class="tooltip-tip ajax-load" href="#" title="Blog App">
                            <i class="icon-document-edit"></i>
                            <span>司机管理</span>

                        </a>
                        <ul>
                            <li>
                                <a class="tooltip-tip2 ajax-load" href="blog-list.html" title="Blog List"><i class="entypo-doc-text"></i><span>司机信息查看</span></a>
                            </li>
                            <li>
                                <a class="tooltip-tip2 ajax-load" href="blog-detail.html" title="Blog Detail"><i class="entypo-newspaper"></i><span>司机审核</span></a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a class="tooltip-tip ajax-load" href="social.html" title="Social">
                            <i class="icon-feed"></i>
                            <span>乘客管理</span>

                        </a>
                    </li>
                    <li>
                        <a class="tooltip-tip ajax-load" href="media.html" title="Media">
                            <i class="icon-camera"></i>
                            <span>订单管理</span>

                        </a>
                    </li>
                </ul>

                <ul class="topnav menu-left-nest">
                    <li>
                        <a href="#" style="border-left:0px solid!important;" class="title-menu-left">

                            <span>&nbsp;后台运维&nbsp;</span>
                            <i data-toggle="tooltip" class="entypo-cog pull-right config-wrap"></i>

                        </a>
                    </li>

                    <li>
                        <a class="tooltip-tip ajax-load" href="index.html" title="Dashboard">
                            <i class="icon-window"></i>
                            <span>实时分布</span>

                        </a>
                    </li>


                    <li>
                        <a class="tooltip-tip ajax-load" href="map.html" title="Icons">
                            <i class="icon-preview"></i>
                            <span>系统派车</span>

                        </a>
                    </li>



                    <li>
                        <a class="tooltip-tip " href="trail.html" title="轨迹查询">
                            <i class="icon-download"></i>
                            <span>查询轨迹</span>
                        </a>
                    </li>
                    <li>
                        <a class="tooltip-tip ajax-load" href="mail.html" title="Mail">
                            <i class="icon-mail"></i>
                            <span>投诉建议</span>
                            <div class="noft-purple">3</div>
                        </a>
                    </li>

                </ul>

                <ul id="menu-showhide" class="topnav menu-left-nest">
                    <li>
                        <a href="#" style="border-left:0px solid!important;" class="title-menu-left">

                            <span>数据挖掘</span>
                            <i data-toggle="tooltip" class="entypo-cog pull-right config-wrap"></i>

                        </a>
                    </li>


                    <li>
                        <a class="tooltip-tip" href="#" title="UI Element">
                            <i class="icon-monitor"></i>
                            <span>用户分析</span>
                        </a>

                    </li>
                    <li>
                        <a class="tooltip-tip" href="#" title="Form">
                            <i class="icon-document"></i>
                            <span>订单分析</span>
                        </a>

                    </li>
                    <li>
                        <a class="tooltip-tip" href="#" title="Tables">
                            <i class="icon-view-thumb"></i>
                            <span>热点区域分析</span>
                        </a>

                    </li>

                    <li>
                        <a class="tooltip-tip ajax-load" href="map.html" title="Map">
                            <i class="icon-location"></i>
                            <span>各地流量分析</span>

                        </a>
                    </li>
                </ul>


                <div class="side-dash">
                    <h3>
                        <span>Device</span>
                    </h3>
                    <ul class="side-dashh-list">
                        <li>Avg. Traffic
                            <span>25k<i style="color:#44BBC1;" class="fa fa-arrow-circle-up"></i>
                                </span>
                        </li>
                        <li>Visitors
                            <span>80%<i style="color:#AB6DB0;" class="fa fa-arrow-circle-down"></i>
                                </span>
                        </li>
                        <li>Convertion Rate
                            <span>13m<i style="color:#19A1F9;" class="fa fa-arrow-circle-up"></i>
                                </span>
                        </li>
                    </ul>
                    <h3>
                        <span>Traffic</span>
                    </h3>
                    <ul class="side-bar-list">
                        <li>Avg. Traffic
                            <div class="linebar">5,7,8,9,3,5,3,8,5</div>
                        </li>
                        <li>Visitors
                            <div class="linebar2">9,7,8,9,5,9,6,8,7</div>
                        </li>
                        <li>Convertion Rate
                            <div class="linebar3">5,7,8,9,3,5,3,8,5</div>
                        </li>
                    </ul>
                    <h3>
                        <span>Visitors</span>
                    </h3>
                    <div id="g1" style="height:180px" class="gauge"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END OF SIDE MENU -->



<!--  PAPER WRAP -->
<div class="wrap-fluid">
    <div class="container-fluid paper-wrap bevel tlbr">





        <!-- CONTENT -->
        <!--TITLE -->
        <div class="row">
            <div id="paper-top">
                <div class="col-sm-3">
                    <h2 class="tittle-content-header">
                        <span class="entypo-menu"></span>
                        <span style="font-size: 0.8em">订单查看
                            </span>
                    </h2>

                </div>



            </div>
        </div>
        <!--/ TITLE -->

        <!-- BREADCRUMB -->
        <ul id="breadcrumb">
            <li>
                <span class="entypo-home"></span>
            </li>
            <li><i class="fa fa-lg fa-angle-right"></i>
            </li>
            <li><a href="#" title="Sample page 1">订单管理</a>
            </li>
            <li><i class="fa fa-lg fa-angle-right"></i>
            </li>
            <li><a href="#" title="Sample page 1">订单查看</a>
            </li>
            <li class="pull-right">
                <div class="input-group input-widget">

                    <input style="border-radius:15px" type="text" placeholder="Search..." class="form-control">
                </div>
            </li>
        </ul>

        <!-- END OF BREADCRUMB -->



        <div class="content-wrap">
            <div class="row">


                <div class="col-sm-12">

                    <div class="nest" id="FootableClose">
                        <div class="title-alt">
                            <h6>YoRoad订单</h6>


                        </div>

                        <div class="body-nest" id="Footable">



                            <table class="table-striped footable-res footable metro-blue" data-page-size="6">
                                <thead>
                                <tr>
                                    <th>
                                        订单编号
                                    </th>
                                    <th>
                                        创建时间
                                    </th>
                                    <th data-hide="phone,tablet">
                                        司机编号
                                    </th>
                                    <th data-hide="phone,tablet">
                                        乘客编号
                                    </th>
                                    <th data-hide="phone">
                                        状态
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>YR-Order-201703281716</td>
                                    <td>2017-3-28 17:16</td>
                                    <td>YR-Diver1</td>
                                    <td>YR-Passenger1</td>
                                    <td data-value="1">
                                        <span class="status-metro status-suspended" title="Suspended">匹配中</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>YR-Order-201703281822</td>
                                    <td>2017-3-28 18:22</td>
                                    <td>YR-Diver2</td>
                                    <td>YR-Passenger2</td>
                                    <td data-value="2">
                                        <span class="status-metro status-active" title="Active">已完成</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>YR-Order-201703281822</td>
                                    <td>2017-3-28 18:22</td>
                                    <td>YR-Diver2</td>
                                    <td>YR-Passenger2</td>
                                    <td data-value="2">
                                        <span class="status-metro status-suspended" title="Suspended">匹配中</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>YR-Order-201703281822</td>
                                    <td>2017-3-28 18:22</td>
                                    <td>YR-Diver2</td>
                                    <td>YR-Passenger2</td>
                                    <td data-value="2">
                                        <span class="status-metro status-active" title="Active">已完成</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>YR-Order-201703281822</td>
                                    <td>2017-3-28 18:22</td>
                                    <td>YR-Diver2</td>
                                    <td>YR-Passenger2</td>
                                    <td data-value="2">
                                        <span class="status-metro status-active" title="Active">已完成</span>
                                    </td>
                                </tr><tr>
                                    <td>YR-Order-201703281822</td>
                                    <td>2017-3-28 18:22</td>
                                    <td>YR-Diver2</td>
                                    <td>YR-Passenger2</td>
                                    <td data-value="2">
                                        <span class="status-metro status-suspended" title="Suspended">匹配中</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>YR-Order-201703281822</td>
                                    <td>2017-3-28 18:22</td>
                                    <td>YR-Diver2</td>
                                    <td>YR-Passenger2</td>
                                    <td data-value="2">
                                        <span class="status-metro status-suspended" title="Suspended">匹配中</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>YR-Order-201703281822</td>
                                    <td>2017-3-28 18:22</td>
                                    <td>YR-Diver2</td>
                                    <td>YR-Passenger2</td>
                                    <td data-value="2">
                                        <span class="status-metro status-suspended" title="Suspended">匹配中</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>YR-Order-201703281822</td>
                                    <td>2017-3-28 18:22</td>
                                    <td>YR-Diver2</td>
                                    <td>YR-Passenger2</td>
                                    <td data-value="2">
                                        <span class="status-metro status-disabled" title="Disabled">已失效</span>
                                    </td>
                                </tr>


                                <tr>
                                    <td>YR-Order-201703281822</td>
                                    <td>2017-3-28 18:22</td>
                                    <td>YR-Diver2</td>
                                    <td>YR-Passenger2</td>
                                    <td data-value="2">
                                        <span class="status-metro status-active" title="Active">已完成</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>YR-Order-201703281822</td>
                                    <td>2017-3-28 18:22</td>
                                    <td>YR-Diver2</td>
                                    <td>YR-Passenger2</td>
                                    <td data-value="2">
                                        <span class="status-metro status-active" title="Active">已完成</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>YR-Order-201703281822</td>
                                    <td>2017-3-28 18:22</td>
                                    <td>YR-Diver2</td>
                                    <td>YR-Passenger2</td>
                                    <td data-value="2">
                                        <span class="status-metro status-active" title="Active">已完成</span>
                                    </td>
                                </tr>

                                </tbody>
                                <tfoot>
                                <tr>
                                    <td colspan="5">
                                        <div class="pagination pagination-centered"></div>
                                    </td>
                                </tr>
                                </tfoot>
                            </table>

                        </div>

                    </div>


                </div>

            </div>
        </div>


        <!-- /END OF CONTENT -->

</div>
<!--  END OF PAPER WRAP -->





<!-- MAIN EFFECT -->
<script type="text/javascript" src="assets/js/preloader.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
<script type="text/javascript" src="assets/js/app.js"></script>
<script type="text/javascript" src="assets/js/load.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>








<!-- /MAIN EFFECT -->
<!-- GAGE -->
<script type="text/javascript" src="assets/js/toggle_close.js"></script>
<script src="assets/js/footable/js/footable.js?v=2-0-1" type="text/javascript"></script>
<script src="assets/js/footable/js/footable.sort.js?v=2-0-1" type="text/javascript"></script>
<script src="assets/js/footable/js/footable.filter.js?v=2-0-1" type="text/javascript"></script>
<script src="assets/js/footable/js/footable.paginate.js?v=2-0-1" type="text/javascript"></script>
<script src="assets/js/footable/js/footable.paginate.js?v=2-0-1" type="text/javascript"></script>





<script type="text/javascript">
    $(function() {
        $('.footable-res').footable();
    });
</script>
<script type="text/javascript">
    $(function() {
        $('#footable-res2').footable().bind('footable_filtering', function(e) {
            var selected = $('.filter-status').find(':selected').text();
            if (selected && selected.length > 0) {
                e.filter += (e.filter && e.filter.length > 0) ? ' ' + selected : selected;
                e.clear = !e.filter;
            }
        });

        $('.clear-filter').click(function(e) {
            e.preventDefault();
            $('.filter-status').val('');
            $('table.demo').trigger('footable_clear_filter');
        });

        $('.filter-status').change(function(e) {
            e.preventDefault();
            $('table.demo').trigger('footable_filter', {
                filter: $('#filter').val()
            });
        });

        $('.filter-api').click(function(e) {
            e.preventDefault();

            //get the footable filter object
            var footableFilter = $('table').data('footable-filter');

            alert('about to filter table by "tech"');
            //filter by 'tech'
            footableFilter.filter('tech');

            //clear the filter
            if (confirm('clear filter now?')) {
                footableFilter.clearFilter();
            }
        });
    });
</script>

</body>

</html>
